<script setup lang="ts">
/**
 * @title 我的告警工单
 */

import { Compass } from '@element-plus/icons-vue'
import SearchForm from './components/SearchForm.vue'
import SubmitWorkOrderModal from './components/SubmitWorkOrderModal.vue'
import ListsPagination from '@/components/ListsPagination/ListsPagination.vue'
import TableLists from '@/components/TableLists/TableLists.vue'

import {
  calculateTheLastTime,
  useMyWorkOrders,
} from '@/mixins/Warning'
import { WARNING_WORK_ORDER_STATES } from '@/enum'

import type { MyWorkOrder } from '@/types'

const searchFormRef = ref<InstanceType<
  typeof SearchForm
> | null>(null)
const submitWorkOrderModalRef
  = ref<InstanceType<typeof SubmitWorkOrderModal>>()

const [warningInfo, setWarningInfo] = useShallowState<
  Partial<MyWorkOrder>
>({
  id: 0,
})

const { loading, lists, columns, pagination, getLists, handleDownload }
  = useMyWorkOrders()

async function queryLists() {
  const {
    state: workOrderState,
    type: warningType,
    code: indicatorCode,
    serieNo: workOrderNum,
    ...rest
  } = searchFormRef.value?.query || {}
  getLists((pageNumber, pageSize) => ({
    pageNumber,
    pageSize,
    workOrderState,
    warningType,
    indicatorCode,
    workOrderNum,
    ...rest,
  }))
}

function clickSearch() {
  pagination.pageNumber = 1
  nextTick(() => {
    queryLists()
  })
}
function clickViewRow(row: MyWorkOrder) {
  setWarningInfo({
    ...row,
    warningLastTime: calculateTheLastTime(
      row.warningStartTime,
      row.warningEndTime || undefined,
    ),
  })
  submitWorkOrderModalRef.value?.open()
}

async function clickDownload() {
  const {
    state: workOrderState,
    type: warningType,
    code: indicatorCode,
    serieNo: workOrderNum,
  } = searchFormRef.value?.query || {}
  handleDownload((pageNumber, pageSize) => ({
    pageNumber,
    pageSize,
    workOrderState,
    warningType,
    indicatorCode,
    workOrderNum,
  }))
}

onMounted(() => {
  queryLists()
})
</script>

<template>
  <div class="padding-sm h-full w-full flex flex-col container">
    <TableLists
      :loading="loading" :lists="lists" :columns="columns" :show-toolbox="true"
      custom-download show-overflow-tooltip @download="clickDownload"
    >
      <template #actions>
        <SearchForm ref="searchFormRef" @search="clickSearch" />
      </template>
      <template #operate="{ row }">
        <TdButton
          v-if="
            row.orderState
              === WARNING_WORK_ORDER_STATES.REJECTED
              || row.orderState
                === WARNING_WORK_ORDER_STATES.UNSETTLED
          " title="提交工单" type="primary" :icon="Compass" :disabled="false" @click="clickViewRow(row)"
        />
      </template>
    </TableLists>
    <ListsPagination
      v-model:page-num="pagination.pageNumber" v-model:page-size="pagination.pageSize"
      :total="pagination.total" @current-change="queryLists" @size-change="queryLists"
    />

    <!-- 提交告警工单 -->
    <SubmitWorkOrderModal ref="submitWorkOrderModalRef" :info="warningInfo" @save-success="queryLists" />
  </div>
</template>
